<!--
 * @FileDescription: 日志查询总览信息
 * @Author: 杨思宇 yangmorefish@126.com
 * @Date: 2021/11/11 13:30
 * @LastEditors: 杨思宇
 * @LastEditTime: 2021/11/12
 -->

/**
 * 注释菜单
 * 活动菜单 活动列表
 * 最后修改 2021/11/12 12:25
 * HTML组成：上中下结构      上为搜索按钮      中为查询条件    下为查询数据显示 显示骨架为大盒子内包含小盒子
 * JS：
 *
 *   data属性：
 *     selectToData 用于向外暴露发送给服务端的深度响应式对象 结构:
 *        {
 *          categoriesOptions 用于索引类别的选项展示 结构为对象数组包含value label
 *          symbolOptions 用于索引象征的选项暂时 结构为对象数组结构包含value label (must/should/must_not)
 *          ctrlInput 输入框控制器 用于存放映射 控制输入框是否显示 数值 请求报文key 等 结构为对象 对应value值为数组
 *            {
 *              'key':[是否显示布尔值,input输入值,请求报文key值]
 *            }
 *        }
 *     
 *   method：
 *     ccc 测试用打印data
 *     categoriesValueChange 索引类别的数组改变时调用 参数val为当前选中数组 控制选中对应input框显示
 *     removeValueChange 索引类别的数组单项被删除时调用 参数val为当前移除项 控制选中对应input框隐藏
 *     clearValueChange 索引类别的数组清空时调用 将所有有关input框隐藏
 *     send 判断用户所填信息是否合法 合法后将请求封装发送 获取响应体
 *
 * CSS:
 *    .father 数据显示区域外层div元素
 *    .el-input__inner input框元素
 *    .el-divider__text 分割线上的字标签元素
 *    .el-divider--horizontal 分割线元素
 *
 */

<template>
  <div style="padding: 10px" @keyup.enter.native="send" class="play">
    <!-- 上 -->
    <el-button
      @click="send"
      type="primary"
      size="big"
      style="width: 694px; height: 60px; font-size: 40px"
      >查询</el-button
    >
    <div style="height: 95px">
      <!-- 中为查询条件 -->
      <!-- 搜索区域 -->
      <div style="padding: 10px 0">
        <!-- {{ options }} -->

        <el-select
          v-model="selectToData.categoriesValue"
          multiple
          clearable
          filterable
          placeholder="索引类别"
          style="width: 385px; margin-right: 10px"
          @visible-change="categoriesValueChange"
          @remove-tag="removeValueChange"
          @clear="clearValueChange"
        >
          <el-option
            v-for="item in selectToData.categoriesOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="selectToData.symbolValue"
          clearable
          filterable
          placeholder="索引象征"
          style="width: 300px"
        >
          <el-option
            v-for="item in selectToData.symbolOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 输入区域 -->
      <div>
        <el-input
          v-show="selectToData.ctrlInput['eslog:user_index:name'][0]"
          v-model="selectToData.ctrlInput['eslog:user_index:name'][1]"
          placeholder="姓名"
          clearable
          style="width: 200px; margin: 0 10px 10px 0"
        />
        <el-input
          v-show="selectToData.ctrlInput['eslog:user_index:account'][0]"
          v-model="selectToData.ctrlInput['eslog:user_index:account'][1]"
          placeholder="账号"
          clearable
          style="width: 200px"
        />
      </div>
    </div>
    <!-- 下为查询数据显示 -->
    <!-- 展示区域 -->
    <div>
      <div
        class="father"
        v-for="(item, index) in selectFromData.responce.result"
        :key="index"
      >
        <el-divider content-position="left">{{ index }}</el-divider>
        <!-- <p>{{item.length}}</p> -->
        <el-space wrap style="padding: 10px">
          <el-card
            v-for="(ite, index) in item"
            :key="index"
            class="box-card card1"
            style="width: 416px"
          >
            <template #header>
              <div class="card-header">
                <span>{{ ite._id }}</span>
                <!-- <el-button class="button" type="text"
                  >Operation button</el-button
                > -->
              </div>
            </template>
            <div
              v-for="(it, index) in ite._source"
              :key="index"
              class="text item parent"
            >
              <div class="left">
                <span>{{ index }}:</span>
              </div>
              <div class="right">
                <span>{{ it }}</span>
              </div>
              <!-- <hr  /> -->
            </div>
          </el-card>
        </el-space>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { ElNotification } from "element-plus";
import requset from "../utils/request";
export default {
  setup(props) {
    const selectToData = reactive({});
    selectToData.categoriesOptions = [
      {
        value: "eslog:user_index:name",
        label: "eslog:user_index:name",
      },
      {
        value: "eslog:user_index:account",
        label: "eslog:user_index:account",
      },
    ];
    selectToData.symbolOptions = [
      {
        value: "must",
        label: "must",
      },
      {
        value: "should",
        label: "should",
      },
      {
        value: "must_not",
        label: "must_not",
      },
    ];
    // 显示映射关系
    selectToData.ctrlInput = {
      "eslog:user_index:name": [false, "", "name"],
      "eslog:user_index:account": [false, "", "account"],
    };
    // 响应体数据
    const selectFromData = reactive({});
    // 响应体内数据对象
    selectFromData.responce = {};
    selectFromData.responce.result = {};
    selectFromData.responce.total = {};
    /**
     * @description: 测试用打印data
     * @void
     */
    function ccc() {
      console.log(selectToData);
    }
    /**
     * @description: 索引类别的数组改变时调用
     * @param {array} 选中条件
     * @void
     */
    function categoriesValueChange(val) {
      if (val == false) {
        for (let item of selectToData.categoriesValue) {
          console.log(item);
          selectToData.ctrlInput[item][0] = true;
        }
      }
    }
    /**
     * @description: 索引类别的数组单项被删除时调用
     * @param {string} 移除的选项
     * @void
     */
    function removeValueChange(val) {
      selectToData.ctrlInput[val][0] = false;
    }
    /**
     * @description: 索引类别的数组清空时调用
     * @param {null} 无
     * @void
     */
    function clearValueChange() {
      console.log(selectToData.ctrlInput);
      for (let item in selectToData.ctrlInput) {
        console.log(item);
        selectToData.ctrlInput[item][0] = false;
      }
    }
    /**
     * @description: 判断用户所填信息是否合法 合法后将请求封装发送 获取响应体
     * @param {null} 无
     * @void
     */
    function send() {
      // console.log(selectToData.categoriesValue);
      // 判断第一行类别 象征输入
      if (!(selectToData.symbolValue && selectToData.categoriesValue[0])) {
        console.log(11);
        ElNotification({
          title: "输入不合法",
          message: "请选择搜索类别",
          type: "warning",
        });
      }
      // 如果第一行输入合法
      else {
        // 记录是否真的有空
        let ctrl;
        for (let item of selectToData.categoriesValue) {
          if (!selectToData.ctrlInput[item][1]) {
            // 条件输入不合法
            ctrl = true;
            ElNotification({
              title: "输入不合法",
              message: "查询条件不能为null",
              type: "warning",
            });
            break;
          }
        }
        // 判断输入合法
        if (!ctrl) {
          // success
          const conditions = {};
          // 包装请求体
          for (let item of selectToData.categoriesValue) {
            conditions[selectToData.ctrlInput[item][2]] =
              selectToData.ctrlInput[item][1];
          }
          requset
            .post("/api/log-search/search/bool", {
              categories: selectToData.categoriesValue,
              symbol: selectToData.symbolValue,
              conditions,
            })
            .then((res) => {
              console.log(res);
              selectFromData.responce = res;
              console.log(Object.keys(res.total).length);
            });
        }
      }
    }
    // console.log(props);
    return {
      selectToData,
      ccc,
      categoriesValueChange,
      removeValueChange,
      clearValueChange,
      send,
      selectFromData,
    };
  },
};
</script>

<style  scoped>
.father {
  background-color: #f5f5f5;
  max-width: fit-content;
  margin-bottom: 20px;
  border: 2px solid #f5f5f5;
}
:deep(.el-input__inner) {
  border-color: black;
  border-width: 2px;
  /* 多彩边框 */
  /* border-image: linear-gradient(to right, red, orange, blue) 10 20; */
  /* -webkit-transform: rotate(-1deg); */
}
:deep(.el-divider__text) {
  font-size: 20px;
}
:deep(.el-divider--horizontal) {
  height: 1px;
  background-color: whitesmoke;
}
.left {
  width: 50%;
}
.left div {
  text-align: right;
}
.parent {
  display: flex;
  height: 25px;
  border-bottom: 2px solid;
  /* background: ; */
  /* border-image: linear-gradient(to right, red, orange, yellow, blue) 10 30; */
}
.play {
  /* -webkit-transform: rotate(1deg); */
  /* -webkit-transform: rotateY(95deg); */
  transition: width 1s linear 2s;
  /* Safari */
  -webkit-transition: width 1s linear 2s;
}


.card1 {
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s, transform 2s,font-size 0.1s;
}
.card1:hover {
  width: 1200px;
  font-size: 16px;
  -webkit-transform: rotate(180deg);
  transform: rotate(0deg);
}
.right{
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s, transform 2s,font-size 1s;
}
.right:hover{
  font-size: 40px;
  font-weight:bold;
}
</style>